<!-- subpkg_consult/medicine/timeline/index.vue -->
<script lang="ts" setup>
  import { getPrescriptionOrderLogisticsAPI } from '@/api/order'; 
import type{ ExpressData } from '@/types/order';
import { onMounted, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import carImg from '@/static/images/car.png'
import startImg from '@/static/images/start.png'
  import endImg from '@/static/images/end.png'
  const props = defineProps<{
    orderId: string
  }>()

  const orderLogistics = ref<ExpressData>()

  const getPrescriptionOrderLogistics = async () => {
    orderLogistics.value = await getPrescriptionOrderLogisticsAPI(props.orderId)
    console.log(orderLogistics.value)
  }
  //getPrescriptionOrderLogistics() //这种也可以
  // onMounted(() => {
  //   getPrescriptionOrderLogistics()
  // })

  // 声明高德地图安全配置
  if (window) {
    ;(window as any)._AMapSecurityConfig = {
      securityJsCode: 'ae504add6495e6e5f6aa3ae5ef3f4a6d',
    }
  }

  onMounted(async () => {
    await getPrescriptionOrderLogistics()
    // 此时才可以拿到渲染地图的view的dom对象
    initMap()
  })
  // 初始化地图
  const initMap = async () => {
    // 动态加载高德地图 - 在页面上引入了script标签 引入了高德地图的js文件
    // 原来是手动引入js 现在是自动
    const AMap = await AMapLoader.load({
      key: '7ad7e9d1784a9905562e90c73c679503',
      version: '2.0',
    })
    // 创建地图
    const map = new AMap.Map('map', {
      //设置地图容器id
      zoom: 12, //初始化地图级别
      mapStyle: 'amap://styles/whitesmoke', // 设置地图样式
    })
    // 引入导航路线插件
    AMap.plugin('AMap.Driving', function () {
      // 创建路线规划对象
      const driving = new AMap.Driving({
        map: map,
        showTraffic: false,
        hideMarkers: true, // 隐藏默认标记
      })
      // const start = [116.359966, 40.044579]
      // const end = [116.427281, 39.903719]
      const firstPoint = orderLogistics.value?.logisticsInfo.shift()
      const endPoint = orderLogistics.value?.logisticsInfo.pop()
      const start = [firstPoint?.longitude, firstPoint?.latitude]
      const end = [endPoint?.longitude, endPoint?.latitude]

      // 声明途径点
      const waypoints = orderLogistics.value?.logisticsInfo.map((item) => [
        item.longitude,
        item.latitude,
      ])
      // 添加起点标记
      const startMarker = new AMap.Marker({
        position: start,
        icon: startImg,
        anchor: 'bottom-center', // 图片位置
      })
      map.add(startMarker) // 添加到地图上

      // 添加终点标记
      const endMarker = new AMap.Marker({
        position: end,
        icon: endImg,
        anchor: 'bottom-center', // 图片位置
      })
      map.add(endMarker) // 添加到地图上

      // 规划冲黑马程序 - 到 丰台站
      driving.search(
        start,
        end,
        {
          waypoints,
        },
        function (status: string, result: string) {
          // 画当前快递的位置

          const carMarker = new AMap.Marker({
            position: [
              orderLogistics.value?.currentLocationInfo.longitude,
              orderLogistics.value?.currentLocationInfo.latitude,
            ],
            icon: carImg,
            anchor: 'bottom-center', // 图片位置
          })
          map.add(carMarker)

           setTimeout(() => {
            map.setFitView([carMarker]) // 设置中心点
            map.setZoom(10)
          }, 2000)
        }
      )
    })
  }
</script>

<template>
    <view class="timeline-page">
      <!-- 加载地图 -->
      <view id="map" class="uni-map"></view>
      <!--  end -->
      <cover-view class="timeline-meta">
        <cover-view class="status">订单派送中</cover-view>
        <cover-view class="extra">
          {{ orderLogistics?.estimatedTime }} {{ orderLogistics?.name }} {{ orderLogistics?.awbNo }}
        </cover-view>
      </cover-view>
      <view class="timeline-detail">
        <view class="title">物流详情</view>
        <view class="timeline">
          <view class="line" v-for="item in orderLogistics?.list" :key="item.id">
            <view class="badge text" :class="{ dot: item.status <= 3, icon: item.status > 3 }"></view>
            <view class="label">{{ item.statusValue }}</view>
            <view class="content"> {{ item.content }} </view>
            <view class="time">{{ item.createTime }}</view>
          </view>
          <!-- <view class="line">
            <view class="badge icon">
              <uni-icons custom-prefix="iconfont" color="#2cb5a5" size="15" type="icon-checked" />
            </view>
            <view class="label">已签收</view>
            <view class="content">
              您的订单已由本人签收。如有疑问请联系配送员【赵赵，18332566962】确认。感谢您在优医购用，欢迎再次光临。
            </view>
            <view class="time">今天 10：25</view>
          </view>
          <view class="line">
            <view class="badge icon">
              <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-truck" />
            </view>
            <view class="label">派送中</view>
            <view class="content"> 您的订单正在派送中【深圳市】科技园派送员宋平正在为您派件 </view>
            <view class="time">今天 10：25</view>
          </view>
          <view class="line">
            <view class="badge dot"></view>
            <view class="label">运输中</view>
            <view class="content"> 在广东深圳公司进行发出扫描 </view>
            <view class="time">今天 10：25</view>
          </view>
          <view class="line">
            <view class="badge dot"></view>
            <view class="content"> 在分拨中心广东深圳公司进行卸车扫描 </view>
            <view class="time">今天 10：25</view>
          </view> -->
        </view>
      </view>
    </view>
  </template>

<style lang="scss">
  @import './index.scss';
</style>